<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-05-27 09:04:52
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-06-01 09:04:08
-->
<!--日历-->
<template>
  <div class="calendar">
    <div class="title">
      <div class="titleContent">日历日程</div>
      <div class="newTtile" @click="newSchedule">新建日程</div>
    </div>
    <el-calendar v-model="value" class="el_cal_out">
      <template slot="dateCell" slot-scope="{ data }">
        <div style="margin: 0px" @click="obtainDay(data)">
          {{ data.day.split("-").slice(2).join() }}<br />
          <!--标记-->
          <div v-for="(i, index) in dayTime" :key="index">
            <div v-if="data.day == i" class="budge"></div>
          </div>
        </div>
      </template>
    </el-calendar>
    <new-schedule
      :dialog="dialog"
      ref="schedule"
      v-if="dialog.newScheduleShowEject"
    ></new-schedule>
  </div>
</template>

<script>
import { calendar } from "@/api/index";
import NewSchedule from "../../calendar/components/newSchedule.vue";
export default {
  components: {
    NewSchedule,
  },
  data() {
    return {
      value: "",
      dayTime: ["2022-05-28", "2022-05-26", "2022-05-16"],
      dialog: {
        newScheduleShow: false,
        newScheduleShowEject: false,
      },
    };
  },
  created() {
    this.getTime();
  },
  methods: {
    // 新建日程
    newSchedule() {
      this.dialog.newScheduleShowEject = true;
      this.$nextTick(() => {
        this.dialog.newScheduleShow = true;
      });
    },
    getTime() {
      var now = new Date();
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let time = year + "-" + (month < 10 ? "0" + month : month);
      calendar({
        type: 11,
        userIds: [],
        month: time,
      }).then((res) => {
        this.dayTime = res.data;
      });
      console.log(time);
    },
    obtainDay(data) {
      this.$router.push(`/calendar?dayTime=${data.day}`);
      console.log(data);
    },
  },
};
</script>

<style lang="less" scoped>
.calendar {
  background-color: #fff;
  .title {
    padding: 24px 24px 0 24px;
    display: flex;
    justify-content: space-between;
  }
}
.titleContent {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2b2b;
}
.newTtile {
  cursor: pointer;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1267fa;
}
.el-calendar {
  width: 400px;
  height: 390px;
}
/deep/.el-calendar-day {
  display: flex;
  justify-content: center;
  height: 40px !important;
}
.budge {
  width: 8px;
  height: 8px;
  background: #e6a23c;
  border-radius: 50%;
  margin: 0 auto;
  margin-top: 5px;
}
</style>